<template>
  <div class="w-full p-6 flex h-full justify-center items-center bg-bg">
    <el-scrollbar height="100%" class="w-full h-full rounded-lg">
      <div class="flex w-full p-6 shadow-lg rounded-lg flex-col bg-white">
        <re-input title="标题" titleWidth="6">
          <el-input placeholder="请输入内容" v-model="awardInfo.title" />
        </re-input>
        <re-input title="描述" titleWidth="6" style="margin-top: 1.5rem">
          <el-input
            placeholder="请输入内容"
            v-model="awardInfo.content"
            type="textarea"
          />
        </re-input>
        <re-input title="类型" titleWidth="6" style="margin-top: 1.5rem">
          <el-input placeholder="请输入内容" v-model="awardInfo.type" />
        </re-input>
        <re-input title="获得时间" titleWidth="6" style="margin-top: 1.5rem">
          <el-date-picker
            class="w-full"
            v-model="awardInfo.getTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </re-input>
        <div class="flex w-full items-center" style="margin-top: 1.5rem">
          <div
            class="flex justify-center items-center title-class rounded-l"
            style="width: 6rem; font-size: 14px"
          >
            <p>图片描述</p>
          </div>
          <el-upload
            list-type="picture-card"
            multiple
            :on-change="handleImgsChange"
            :on-remove="handleImgsRemove"
            :auto-upload="false"
            class="w-full pl-4"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
        <div class="flex w-full items-center" style="margin-top: 1.5rem">
          <div
            class="flex justify-center items-center title-class rounded-l"
            style="width: 6rem; font-size: 14px"
          >
            <p>文件描述</p>
          </div>
          <el-upload
            class="w-full pl-4"
            :auto-upload="false"
            :on-change="handleFilesChange"
            :on-remove="handleFilesRemove"
            multiple
          >
            <el-button size="small" type="primary">点击添加文件</el-button>
            <template #tip>
              <div class="el-upload__tip">文件大小不能超过 50mb</div>
            </template>
          </el-upload>
        </div>
        <el-button
          style="margin-top: 1.5rem"
          type="primary"
          icon="el-icon-upload"
          @click="clickSumbit"
          :disabled="!canUpload"
          :loading="!canUpload"
          >提交
        </el-button>
      </div>
    </el-scrollbar>
  </div>
</template>

<script lang="ts">
import { reactive, ref } from "vue-demi";
import { addAwardByFetch, AwardInsertDTO } from "/@/api/award";
import ReInput from "/@/components/ReInput/index.vue";
import { errorMessage, successMessage } from "/@/utils/message";
export default {
  components: {
    ReInput
  },
  setup() {
    const awardInfo = reactive<AwardInsertDTO>({
      content: "",
      title: "",
      type: "",
      getTime: new Date(),
      images: [],
      files: []
    });

    const canUpload = ref(true);

    const handleImgsChange = (file, fileList) => {
      awardInfo.images = fileList;
    };
    const handleImgsRemove = (file, fileList) => {
      awardInfo.images = fileList;
    };
    const handleFilesChange = (file, fileList) => {
      awardInfo.files = fileList;
    };
    const handleFilesRemove = (file, fileList) => {
      awardInfo.files = fileList;
    };

    const clickSumbit = async () => {
      canUpload.value = false;
      const res = await addAwardByFetch(awardInfo);
      if (res.code === 1) {
        successMessage(res.message);
        setTimeout(() => {
          canUpload.value = true;
        }, 3000);
      } else {
        errorMessage(res.message);
        setTimeout(() => {
          canUpload.value = true;
        }, 3000);
      }
    };
    return {
      awardInfo,
      handleImgsChange,
      handleImgsRemove,
      handleFilesChange,
      handleFilesRemove,
      canUpload,
      clickSumbit
    };
  }
};
</script>

<style scoped>
.title-class {
  background-color: #f5f7fa;
  color: #9d93a6;
  font-size: 14px;
  border-color: rgb(220, 223, 230);
  border-style: solid;
  border-width: 1px;
}
</style>
